<html>

<head>
    <title>人脸识别系统</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <link rel="stylesheet" href="/static/assets/css/main.css">
    <link rel="stylesheet" href="/static/assets/css/css.css">
    <link rel="stylesheet" href="/static/layui/css/layui.css" media="all">
    <style>
        a {
            color: white;
        }
        .width-max {
            width: 100%;
        }
        .logo img{
            height:auto;
            border-radius: 60px;
        }
    </style>
</head>

<body class="vsc-initialized is-preload">

    <!-- Wrapper -->
    <div id="wrapper">
        <!-- Header -->
        <header id="header">
            <div class="logo">
                <img class="width-max" src="/static/assets/images/logo.jpg">
            </div>
            <div class="content">
                <div class="inner">
                    <h1>人脸识别系统</h1>
                    <p>基于OpenCV2跨平台计算机视觉和机器学习软件库<br>
                        人脸检测及人脸识别系统</p>
                </div>
            </div>
            <nav class="use-middle">
                <ul>
                    <li><a href="#detect">人脸检测</a></li>
                    <li><a href="#discern">人脸识别</a></li>
                </ul>
            </nav>
        </header>
        <!-- Main -->
        <div id="main" style="display: none;">

            <!-- 人脸检测 detect -->
            <article id="detect" style="display: none;">
                <h2 class="major">人脸检测</h2>
                <div class="layui-upload-drag width-max" id="uploadDetectFile" style="background-color: rgba(255,255,255,0);">
                    <i class="layui-icon layui-icon-upload"></i>
                    <p>点击上传，或将文件拖拽到此处</p>
                    <div class="layui-hide" id="uploadDetectView">
                        <hr>
                        <img src="" alt="上传成功后渲染" style="max-width: 80%">
                    </div>
                </div>
                <nav class="use-middle width-max" style="margin: 20px 0">
                    <button id="detectBtn" type="button" class="width-max btn" onclick="handleDetect()">
                        开  始  检  测
                    </button>
                </nav>
                <div class="close">Close</div>
            </article>

            <!-- 人脸识别 discern -->
            <article id="discern" style="display: none;">
                <h2 class="major">人脸识别</h2>
                <div class="layui-upload-drag width-max" id="uploadDiscernFile" style="background-color: rgba(255,255,255,0);">
                    <i class="layui-icon layui-icon-upload"></i>
                    <p>点击上传，或将文件拖拽到此处</p>
                    <div class="layui-hide" id="uploadDiscernView">
                        <hr>
                        <img src="" alt="上传成功后渲染" style="max-width: 80%">
                    </div>
                </div>
                <nav class="use-middle width-max" style="margin: 20px 0">
                    <button id="discernBtn" type="button" class="width-max btn" onclick="handleDiscern()">
                        开  始  识  别
                    </button>
                </nav>
                <div class="close">Close</div>
            </article>
        </div>

        <!-- Footer -->
        <footer id="footer">
            <p class="copyright">Copyright © 2020.Company name All rights reserved.More Templates -
                <a href="http://www.konbai.work/" title="KonBAI" target="_blank">[空白]</a>
            </p>
        </footer>

    </div>

    <!-- BG -->
    <div id="bg"></div>

    <!-- Scripts -->
    <script src="/static/assets/js/jquery.min.js"></script>
    <script src="/static/assets/js/browser.min.js"></script>
    <script src="/static/assets/js/breakpoints.min.js"></script>
    <script src="/static/assets/js/util.js"></script>
    <script src="/static/assets/js/main.js"></script>
    <script src="/static/layui/layui.js"></script>
    <script>
        let detect_prefix = '/detect';
        let discern_prefix = '/discern';
        // 拖拽上传
        layui.use('upload', function () {
            let upload = layui.upload;
            // 检测上传图片模块
            upload.render({
                elem: '#uploadDetectFile',
                url: detect_prefix + '/upload', // 上传接口
                done: function (res) {
                    layer.msg('上传成功');
                    layui.$('#uploadDetectView').removeClass('layui-hide').find('img').attr('src', res.data);
                }
            });
            // 识别上传图片模块
            upload.render({
                elem: '#uploadDiscernFile',
                url: discern_prefix + '/upload', // 上传接口
                done: function (res) {
                    layer.msg('上传成功');
                    layui.$('#uploadDiscernView').removeClass('layui-hide').find('img').attr('src', res.data);
                }
            });
        });

        function handleDetect() {
            let imgPath = layui.$('#uploadDetectView').find('img')[0].getAttribute('src')
            if (imgPath === "" || imgPath === undefined) {
                parent.layer.msg("请选择图片！");
                return false;
            }
            $.ajax({
                cache : true,
                type : "POST",
                url : detect_prefix,
                data : Object.assign({imgPath: imgPath}), // formid
                async : false,
                error : function(request) {
                    parent.layer.alert("操作失败！");
                },
                success : function(data) {
                    if (data.code === 0) {
                        layer.open({
                            type: 1,
                            title: false,
                            shadeClose: true, // 是否点击遮罩关闭
                            content : "<img src='" + data.data  + "' />"
                        });
                    } else {
                        parent.layer.alert(data.msg)
                    }

                }
	        });
        }

        function handleDiscern() {
            let imgPath = layui.$('#uploadDiscernView').find('img')[0].getAttribute('src');
            if (imgPath === "" || imgPath === undefined) {
                parent.layer.msg("请选择图片！");
                return false;
            }
            $.ajax({
                cache : true,
                type : "POST",
                url : discern_prefix,
                data : Object.assign({imgPath: imgPath}), // 你的formid
                async : false,
                error : function(request) {
                    parent.layer.alert("操作失败！");
                },
                success : function(data) {
                    if (data.code === 0) {
                        parent.layer.open({
                            title: "识别结果",
                            content : "<span style='color: #000000'>" + data.data + "</span>"
                        });
                    } else {
                        parent.layer.alert(data.msg)
                    }
                }
	        });
        }
    </script>
</body>

</html>